<script setup>
	import {
		RouterLink,
		RouterView
	} from 'vue-router'
</script>

<template>

	<div>
		<div class="div-style2" v-if="$store.state.routerViewShow">
			<div class="div-style1">
				<div class="div-style-text">
					扫码登录
				</div>
				<div style="margin: 0 auto;width: 86%;margin-top: 30px;">
					<el-image :src="$store.state.qrUrl" :fit="fill" />
				</div>
			</div>
		</div>

		<RouterView v-else />
	</div>
</template>
<script>
	var that, timeSetInterval;
	export default {
		data() {
			return {
				key: '',
			};
		},

		methods: {
			createKey() {
				clearInterval(timeSetInterval);
				that.$http.post('/user/createKey', {}, {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
				}).then((res) => {
					that.key = res.data.key;
					that.createCode();
				})
			},
			createCode() {
				that.$http.post('/user/createBusinessCard/v2', {
					content: that.key
				}, {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					responseType: 'blob'
				}).then((res) => {
					console.log(res.data)
					const myBlob = new window.Blob([res.data])
					const qrUrl = window.URL.createObjectURL(myBlob)

					that.$store.state.qrUrl = qrUrl;

					timeSetInterval = setInterval(() => {
						that.queryOpenIdByKey();
					}, 3000);
				})
			},
			queryOpenIdByKey() {

				that.$http.post('/user/queryOpenIdByKey', {
					key: that.key
				}, {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
				}).then((res) => {
					if (res.data.code == 'success') {
						clearInterval(timeSetInterval);
						// that.$store.state.routerViewShow = false;
						
						// that.$store.state.$userInfo.id = res.data.openId;
						// that.$store.state.member = res.data.member;
						// that.$store.state.uid = res.data.uid;
						
						that.$store.commit('setRouterViewShow', false);
						that.$store.commit('setuserId', res.data.openId);
						that.$store.commit('setMember', res.data.member);
						that.$store.commit('setUid', res.data.uid);
						
						that.$nextTick(() => {
							console.log(that.$store.state.routerViewShow,"console.log(that.$store.state.routerViewShow);");
							that.$router.push("/homeIndex")
						})

					}
				})
			},
		},
		mounted() {
			that = this;
			console.log(that.$store.state.routerViewShow);
			if(that.$store.state.routerViewShow){
				this.createKey();
			}
			

		}
	}
</script>

<style>
	.div-style2 {
		background-color: whitesmoke;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.div-style1 {
		width: 300px;
		height: 450px;
		background-color: white;
	}

	.div-style-text {
		text-align: center;
		padding-top: 44px;
		font-size: 17px;
		color: deepskyblue;
	}
</style>